<template>
  <view class="favorites-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">我的收藏</text>
    </view>
    
    <view class="favorites-container">
      <!-- 收藏统计 -->
      <view class="stats-card">
        <view class="stats-info">
          <text class="stats-number">{{ favorites.length }}</text>
          <text class="stats-label">收藏总数</text>
        </view>
        <view class="stats-tips">收藏您感兴趣的养老院，方便随时查看</view>
      </view>
      
      <!-- 无收藏时显示 -->
      <view class="empty-container" v-if="favorites.length === 0">
        <view class="empty-image">
          <text class="empty-icon iconfont">&#xe715;</text>
        </view>
        <text class="empty-text">您还没有收藏任何养老院</text>
        <view class="empty-btn" @tap="navigateToHome">
          <text>去浏览养老院</text>
        </view>
      </view>
      
      <!-- 收藏列表 -->
      <view class="favorites-list" v-else>
        <view v-for="(item, index) in favorites" :key="index" class="favorite-item">
          <!-- 收藏项目信息 -->
          <view class="item-content" @tap="viewDetail(item.id)">
            <view class="item-image">
              <text class="placeholder-icon iconfont">&#xe614;</text>
            </view>
            <view class="item-info">
              <view class="info-header">
                <text class="item-name">{{ item.name }}</text>
                <text :class="['item-tag', getTagClass(item.type)]">{{ getTagName(item.type) }}</text>
              </view>
              <view class="info-rating">
                <text v-for="i in 5" :key="i" class="star" :class="{ 'active': i <= item.rating }">★</text>
                <text class="rating-text">{{ item.rating }}.0</text>
                <text class="review-count">({{ item.reviewCount }}条评价)</text>
              </view>
              <view class="info-address">
                <text class="address-icon iconfont">&#xe665;</text>
                <text class="address-text">{{ item.address }}</text>
              </view>
              <view class="info-features">
                <text class="feature-item" v-for="(feature, fIndex) in item.features" :key="fIndex">{{ feature }}</text>
              </view>
            </view>
          </view>
          
          <!-- 收藏操作 -->
          <view class="item-actions">
            <view class="action-btn primary" @tap="viewDetail(item.id)">
              <text>查看详情</text>
            </view>
            <view class="action-btn" @tap="makeAppointment(item.id)">
              <text>预约参观</text>
            </view>
            <view class="action-btn danger" @tap="removeFavorite(index)">
              <text>取消收藏</text>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="!loadAll" @tap="loadMoreFavorites">
          <text class="load-text">加载更多</text>
        </view>
        <view class="load-all" v-else>
          <text>— 已加载全部收藏 —</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 收藏列表
const favorites = ref([]);
// 分页
const page = ref(1);
// 是否加载全部
const loadAll = ref(false);

// 页面加载时执行
onMounted(() => {
  loadFavorites();
});

// 加载收藏数据
const loadFavorites = () => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    const newFavorites = [
      {
        id: 101,
        name: '康福养老院',
        type: 'nonprofit',
        rating: 5,
        reviewCount: 32,
        address: '上海市浦东新区张杨路1000号',
        features: ['医养结合', '24小时护理', '定制餐饮'],
        isFavorite: true,
        image: ''
      },
      {
        id: 102,
        name: '颐养天年养老公寓',
        type: 'private',
        rating: 4,
        reviewCount: 18,
        address: '上海市静安区南京西路800号',
        features: ['文化养老', '康复训练', '心理咨询'],
        isFavorite: true,
        image: ''
      },
      {
        id: 103,
        name: '夕阳红老年公寓',
        type: 'public',
        rating: 4.5,
        reviewCount: 24,
        address: '上海市杨浦区邯郸路600号',
        features: ['高端设施', '亲情陪护', '智能监护'],
        isFavorite: true,
        image: ''
      }
    ];
    
    if (page.value === 1) {
      favorites.value = newFavorites;
    } else {
      favorites.value = [...favorites.value, ...newFavorites];
    }
    
    // 判断是否加载全部
    if (page.value >= 2) {
      loadAll.value = true;
    }
  }, 500);
};

// 加载更多收藏
const loadMoreFavorites = () => {
  if (loadAll.value) return;
  
  page.value++;
  loadFavorites();
};

// 查看养老院详情
const viewDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  });
};

// 预约参观
const makeAppointment = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/appointment?id=${id}`
  });
};

// 取消收藏
const removeFavorite = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消收藏该养老院吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里应该调用API取消收藏
        favorites.value.splice(index, 1);
        
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        });
      }
    }
  });
};

// 获取养老院类型标签名称
const getTagName = (type) => {
  const typeMap = {
    'public': '公办',
    'private': '民办',
    'nonprofit': '非营利'
  };
  
  return typeMap[type] || '其他';
};

// 获取养老院类型标签样式类
const getTagClass = (type) => {
  const classMap = {
    'public': 'tag-public',
    'private': 'tag-private',
    'nonprofit': 'tag-nonprofit'
  };
  
  return classMap[type] || '';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 导航到首页
const navigateToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.favorites-page {
  min-height: 100vh;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(240, 165, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #e67e22;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #e67e22;
    }
  }
  
  .favorites-container {
    padding: 15px;
    
    // 统计卡片
    .stats-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(230, 126, 34, 0.1);
      background: linear-gradient(to right, #fff8e1, #fff);
      
      .stats-info {
        display: flex;
        flex-direction: column;
        
        .stats-number {
          font-size: 24px;
          font-weight: bold;
          color: #e67e22;
          margin-bottom: 5px;
        }
        
        .stats-label {
          font-size: 14px;
          color: #8d6e63;
        }
      }
      
      .stats-tips {
        font-size: 12px;
        color: #bcaaa4;
        max-width: 60%;
      }
    }
    
    // 无收藏时显示
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 0;
      
      .empty-image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgba(240, 165, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        
        .empty-icon {
          font-size: 40px;
          color: #f0a500;
        }
      }
      
      .empty-text {
        font-size: 16px;
        color: #8d6e63;
        margin-bottom: 20px;
      }
      
      .empty-btn {
        padding: 12px 25px;
        background: linear-gradient(135deg, #f0a500, #e67e22);
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(240, 165, 0, 0.2);
        
        text {
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
    
    // 收藏列表
    .favorites-list {
      .favorite-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        // 收藏内容区域
        .item-content {
          display: flex;
          margin-bottom: 15px;
          
          .item-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            background-color: rgba(240, 165, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            
            .placeholder-icon {
              font-size: 30px;
              color: #f0a500;
            }
          }
          
          .item-info {
            flex: 1;
            overflow: hidden;
            
            .info-header {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              
              .item-name {
                font-size: 16px;
                font-weight: 600;
                color: #5d4037;
                margin-right: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              
              .item-tag {
                font-size: 12px;
                padding: 2px 6px;
                border-radius: 10px;
                
                &.tag-public {
                  background-color: rgba(0, 150, 136, 0.1);
                  color: #009688;
                }
                
                &.tag-private {
                  background-color: rgba(233, 30, 99, 0.1);
                  color: #e91e63;
                }
                
                &.tag-nonprofit {
                  background-color: rgba(103, 58, 183, 0.1);
                  color: #673ab7;
                }
              }
            }
            
            .info-rating {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              
              .star {
                font-size: 14px;
                color: #d1d1d1;
                margin-right: 2px;
                
                &.active {
                  color: #f0a500;
                }
              }
              
              .rating-text {
                font-size: 14px;
                color: #f0a500;
                margin-left: 4px;
                font-weight: 500;
              }
              
              .review-count {
                font-size: 12px;
                color: #bcaaa4;
                margin-left: 4px;
              }
            }
            
            .info-address {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              
              .address-icon {
                font-size: 14px;
                color: #8d6e63;
                margin-right: 4px;
              }
              
              .address-text {
                font-size: 13px;
                color: #8d6e63;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            
            .info-features {
              display: flex;
              flex-wrap: wrap;
              
              .feature-item {
                font-size: 12px;
                color: #8d6e63;
                background-color: rgba(141, 110, 99, 0.05);
                padding: 2px 6px;
                border-radius: 10px;
                margin-right: 6px;
                margin-bottom: 6px;
              }
            }
          }
        }
        
        // 收藏操作区域
        .item-actions {
          display: flex;
          border-top: 1px solid rgba(141, 110, 99, 0.1);
          padding-top: 12px;
          
          .action-btn {
            padding: 8px 0;
            display: flex;
            justify-content: center;
            flex: 1;
            
            text {
              font-size: 14px;
              color: #8d6e63;
            }
            
            &.primary {
              text {
                color: #f0a500;
              }
            }
            
            &.danger {
              text {
                color: #f44336;
              }
            }
          }
        }
      }
      
      // 加载更多
      .load-more {
        display: flex;
        justify-content: center;
        padding: 15px 0;
        
        .load-text {
          font-size: 14px;
          color: #f0a500;
          padding: 8px 20px;
          border: 1px solid rgba(240, 165, 0, 0.3);
          border-radius: 20px;
        }
      }
      
      .load-all {
        display: flex;
        justify-content: center;
        padding: 15px 0;
        
        text {
          font-size: 14px;
          color: #bcaaa4;
        }
      }
    }
  }
}
</style> 